<script setup>

	import { ref, computed } from "vue";
		import { uniFetch } from '../../utils/fetch';
		const planDepartureTime = ref("")
		const id = ref("")
		onLoad(e => {
			console.log(e, 'e');
			planDepartureTime.value = e.planDepartureTime;
			id.value = e.id
		})
	
		const delaytime = ref("");
		const delayTimeValid = computed(() => {
			const start = new Date(planDepartureTime.value)
			console.log(start,"start");
			const end = new Date(delaytime.value);
					console.log(end,"end");
			return end - start > 0 && end - start < 7200 * 1000
			console.log(end - start > 0 && end - start < 7200 * 1000);
		})
		const delayReason = ref("");
		const count = computed(() =>
			delayReason.value.length
	
		);
		const countvalid=computed(()=>{
			return count.value>0&&count.value<=50
			console.log(count>0&&count<=50);
		})
		
		const xgtime = (e) => {
			console.log(e, "eeeerr");
			const [date] = planDepartureTime.value.split(" ");
			console.log(date, "date");
			delaytime.value = `${date} ${e.detail.value}`
			console.log(delaytime, "delay");
		}
		const enablesubmit=computed(()=>{
			console.log(countvalid.value,"countvalid");
					console.log(delayTimeValid.value,"delayTimeValid");
					console.log(!countvalid.value||!delayTimeValid.value);
					return !countvalid.value||!delayTimeValid.value
		})
		const submit=()=>{
			uniFetch({
				url:"/driver/tasks/delay",
				method:"PUT",
				data:{
					delayReason:delayReason.value,
					delayTime:delaytime.value,
					id:id.value
				}
			}).then(res=>{
				if(res.data.code == 200){
					uni.showToast({
						title:"操作成功",
						icon:"none"
					})
					uni.reLaunch({
						url:"/pages/task/index"
					})
				}
			})
		}

</script>


	

<template>
	<view class="page-container">
		<uni-list :border="false">
			<uni-list-item title="原定时间 " showArrow :rightText="planDepartureTime" />
			<uni-list-item title="延迟时间" showArrow>
				<template v-slot:footer>
					<picker class="time-picker" mode="time" @change="xgtime">
						<text v-if="delaytime==''">不可超过2个小时</text>
						<text v-if="delaytime!==''">{{delaytime}}:00</text>

					</picker>
				</template>
			</uni-list-item>
			<uni-list-item direction="column">
				<template v-slot:body>
					<view class="textarea-wrapper">
						<textarea class="textarea" v-model="delayReason" placeholder-style="color: #818181"
							placeholder="请输入延迟提货原因"></textarea>
						<text class="words-count">{{count}}/50</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item :border="false">
				<template v-slot:body>
					<button :disabled="enablesubmit" @click="submit" class="button">提交</button>
				</template>
			</uni-list-item>
		</uni-list>
	</view>

</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>